<template>
<div>
  <el-form
    label-width="80px"
    :model=formData>
    <template v-for="item in formHeader">
        <el-form-item 
          :label="item.label" 
          :prop="item.prop"
          :key="item.label">
          <el-col :span="item.width">
            <!-- 输入框 -->
            <el-input v-if="item.type==='input'" v-model="formData[item.prop]" 
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled "
                :style="{width:item.width}"></el-input>
            <!-- 文本域 -->
            <el-input v-if="item.type==='textarea'" type="textarea" 
                :disabled="item.disabled && item.disabled(formData)"
                @change="item.change && item.change(formData[item.prop])"
                 v-model="formData[item.prop]"  :style="{width:item.width}"></el-input>
            <!-- 下拉框 -->
            <el-select v-if="item.type==='select'" v-model="formData[item.prop]"  
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)">
                <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='radio'" v-model="formData[item.prop]"
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)">
                <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
            </el-radio-group>
            <!-- 单选按钮 -->
            <el-radio-group v-if="item.type==='radioButton'" v-model="formData[item.prop]" 
                    @change="item.change && item.change(formData[item.prop])"
                    :disabled="item.disabled && item.disabled(formData)">
                <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group v-if="item.type==='checkbox'" v-model="formData[item.prop]" 
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)">
                <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key='ch.value'>{{ch.label}}</el-checkbox>
            </el-checkbox-group>
            <!-- 日期 -->
            <el-date-picker v-if="item.type==='date'" v-model="formData[item.prop]" 
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)"></el-date-picker>
            <!-- 时间 -->
            <el-time-select v-if="item.type==='time'" v-model="formData[item.prop]" type=''
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)"></el-time-select>
            <!-- 日期时间 -->
            <el-date-picker v-if="item.type==='dateTime'" type='datetime' v-model="formData[item.prop]" 
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disable && item.disable(formData[item.prop])"></el-date-picker>
            <!-- 滑块 -->
            <!-- <el-slider v-if="item.type==='Slider'" v-model="formData[item.prop]"></el-slider> -->
            <!-- 开关 -->
            <el-switch v-if="item.type==='switch'" v-model="formData[item.prop]" 
                @change="item.change && item.change(formData[item.prop])"
                :disabled="item.disabled && item.disabled(formData)"></el-switch>
          </el-col>
        </el-form-item>
    </template>
  </el-form>  
  
</div>
</template>

<script>
/* 
    传值说明:
    formHeader: 表头属性  数组对象
      prop：表单实际的值
      label： 表单名称
      width： 表单长度
      type： 输入框类型  
      radio： 多选框
        radios： 数组对象
          value：值
          label： 单选框前面的名称
      select: 下拉框     
        option: 数组对象
          value：值   
          label： 下拉框前面的名称 
      dateTime： 时间选择器 
*/
export default {
name: "",
props: {
    formData: { type: Object },
    formHeader: { type: Array, required: true }
  }
}

</script>

<style>

</style>

